<template>
    <div class="phoneVideo">
        <el-image class="video_image" :src="videoImage" alt="" fit="cover">
            <template #error>
                <el-image class="video_image" src="file/mov.png" alt=""></el-image>
            </template>
        </el-image>
        <el-image class="video_play" src="file/playnew.png" alt="" fit="cover"></el-image>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, onMounted } from 'vue';
const props = defineProps(['materialsInfo']);

const videoImage = ref()

onMounted(() => {
    const video = document.createElement('video')
    video.setAttribute('crossOrigin', 'anonymous');//处理跨域
    video.setAttribute('src', props.materialsInfo.fileInfo.url);
    console.log('props.materialsInfo: ', props.materialsInfo);
    video.setAttribute('width', 77);
    video.setAttribute('height', 76);
    const canvas = document.createElement('canvas')
    canvas.width = video.width;
    canvas.height = video.height;
    const ctx = canvas.getContext('2d')

    video.addEventListener('loadeddata', function() {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const dataURL = canvas.toDataURL('image/png');
        console.log('dataURL: ', dataURL);
        videoImage.value = dataURL
    });
})
</script>
<style lang="scss" scoped>
.phoneVideo {
    position: relative;
    width: 88px;
    height: 76px;
    display: flex;
    align-items: center;

    .video_image {
        width: 100%;
        height: 76px;
    }

    .video_play {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
